<template>
    <div class="box-light">
        <el-row>
            <el-col :span="12">
                <el-form :model="form" label-width="80" style="max-width: 640px">
                    <el-form-item label="编号">
                        <el-row style="display: flex; justify-content: space-between;">
                            <el-col :span="6">
                                <el-select v-model="form.age" placeholder="R18/全年龄" clearable>
                                    <el-option label="R18" value="R18" />
                                    <el-option label="全年龄" value="All" />
                                </el-select>
                            </el-col>
                            <span>-</span>
                            <el-col :span="6">
                                <el-select v-model="form.translate" placeholder="是/否有汉化" clearable>
                                    <el-option label="是" value="0" />
                                    <el-option label="否" value="1" />
                                </el-select>
                            </el-col>
                            <span>-</span>
                            <el-col :span="6">
                                <el-input v-model="form.id" placeholder="序列号" clearable required />
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="Gal名">
                        <el-input v-model="form.galname" clearable required />
                    </el-form-item>
                    <el-form-item label="中文名">
                        <el-input v-model="form.c_name" clearable required />
                    </el-form-item>
                    <el-form-item label="地区">
                        <el-radio-group v-model="form.country">
                            <el-radio :label="0">中国</el-radio>
                            <el-radio :label="1">日本</el-radio>
                            <el-radio :label="2">欧美</el-radio>
                            <el-radio :label="3">其他</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-row style="display: flex; justify-content: space-between;">
                        <el-form-item label="链接地址">
                            <el-input v-model="form.address" style="width: 300px;" clearable required />
                        </el-form-item>
                        <el-form-item label="提取码">
                            <el-input v-model="form.pwd" style="width: 100px" clearable required />
                        </el-form-item>
                    </el-row>
                    <el-row style="display: flex; justify-content: space-between;">
                        <el-form-item label="发布时间">
                            <el-date-picker v-model="form.premiere" type="date" placeholder="选择日期" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" />
                        </el-form-item>
                        <el-form-item label="发售时间">
                            <el-date-picker v-model="form.issue_time" type="date" placeholder="选择日期" format="YYYY/MM/DD"
                                value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-row>
                    <el-form-item label="简介">
                        <el-input v-model="form.intro" :rows="8" maxlength="2000" type="textarea" show-word-limit
                            required />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">创建词条</el-button>
                        <el-button>清空</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">
                <el-upload v-model:file-list="fileList"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { ElSpace, ElMessage, ElButton, ElFormItem, ElForm, ElInput, ElRow, ElCol } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { Add } from '@/Apis/modules/galgame';

const fileList = ([
    {
        name: 'food.jpeg',
        url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
    },
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}

const form = reactive({
    age: '',
    translate: '',
    id: '',
    galname: '',
    c_name: '',
    country: 0,
    address: '',
    pwd: '',
    premiere: '',
    issue_time: '',
    intro: '',
})

const onSubmit = async () => {
    const { age, translate, id, galname, c_name, country, address, pwd, premiere, issue_time, intro } = form;

    const data = {
        number: age + translate + id,
        galname,
        c_name,
        country,
        address,
        pwd,
        premiere,
        issue_time,
        intro
    };

    await Add(data);
}
</script>

<style scoped></style>